<template>
  <div id="index" @click="hideNav"> 
    <header>
      <header-logo @click.native.stop="showNav"></header-logo> 
      <header-nav id="nav"></header-nav>
      <header-log></header-log>
    </header>
    <section>
      <keep-alive>
         <router-view></router-view>
      </keep-alive>
    </section>
    <footer>
      <footer-box></footer-box>
    </footer>
  </div>
</template>

<script>
import HeaderNav from '../components/header/nav.vue'
import HeaderLogo from '../components/header/logo.vue'
import HeaderLog from '../components/header/log.vue'
import FooterBox from '../components/footer/footer.vue'
import { mapActions, mapMutations } from 'vuex'
export default {
  name: 'Index',

  data() {
    return {
    
    };
  },

  components: {
    HeaderNav,
    HeaderLogo,
    HeaderLog,
    FooterBox
  },

  mounted(){
    // 自动登陆
    this.$api.toLogin().then(res => {
      if(res instanceof Object){
        this.getUserInfo(res)
        this.showHint({title:'登录成功!',isFlag:true})
      }
    })
  },
  
  methods: {
    showNav(){
      if(document.body.clientWidth < 800){
        let nav = document.querySelector('#nav')
        nav.style.left = 0
      }
    },
    hideNav(){
      if(document.body.clientWidth < 800){
        let nav = document.querySelector('#nav')
        nav.style.left = '-100%'
      }
    },
    ...mapMutations(['getUserInfo']),
    ...mapActions(['showHint'])
  }
};
</script>

<style scoped>
#index{
  width: 100%;
  padding: 0 20px;
}
header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 2px 1px rgb(224, 224, 224);
}
@media screen and (max-width:800px){
  #index{
    padding: 0;
  }
  
}
</style>